<template>
  <div>
    <p>
      角色名称 <input type="text" placeholder="角色名称查询" v-model="one" />
    </p>
    <br /><br />
    <p style="position:absolute; right:50px;top:200px">
      <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
      <el-button type="danger" icon="el-icon-delete" text>重置</el-button>
    </p>
    <br />
    <div >
      <el-button type="radio" @click="dialogFormVisible = true"
        >+添加角色</el-button
      >
      <el-dialog
        @closed="ad"
        title="+添加角色"
        :visible.sync="dialogFormVisible" >
        <el-form>
          <el-form-item label="角色名称" >
            <el-input v-model="two" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色标识" >
            <el-input v-model="three" autocomplete="off"></el-input>
            <el-form-item label="角色备注" >
              <el-input v-model="four" autocomplete="off"></el-input>
            </el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <br />

    <div>
      <el-table
    :data="newtableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 100%;">
    <el-table-column
      fixed
      prop="id"
      label="id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="角色名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="usercode"
      label="用户代码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="suomin"
      label="说明"
      width="300">
    </el-table-column>
    <el-table-column
      prop="situation"
      label="状态"
      width="200">
    </el-table-column>
    <el-table-column
      label="Action"
      width="400">
      <template >
          <el-button type="text" @click="dialogFormVisible = true"
        >角色菜单</el-button>
         <el-button type="text" @click="dialogFormVisible = true"
        >角色权限</el-button>
        
  <el-button type="text" @click="dialogFormVisible = true"
        >编辑</el-button>
        
         
        <el-button type="text" size="small" @click="dele(index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      
    </div>
    <br />
    <div class="block" style="position: relative; left: 40%">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
         :current-page="currentPage"
        :page-sizes="[2, 4]"
        :page-size='pagesize'
        layout="total,sizes, prev, pager, next, jumper"
        :total="newtableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
       this.pagesize=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
    },
    dele(idx) {
      this.newtableData.splice(idx, 1);
    },
    chaxun() {
      var y = this.one;
      this.newtableData = this.newtableData.filter(function (x) {
        return x.username == y;
      });
    },
    change(x){this.newlist[x]},
    ad() {
      this.newtableData.push({
        id: this.newtableData.length + 1,
        username: this.two,
        usercode: this.three,
        suomin: this.four,
        bum: "",
        gangwei: "",
        time: "2021-06-09",
      });
    },
    getPlayList() {
      //  console.dir(this.axios);
      //this.axios.get()
      //this.axios.post()

      this.axios.get("http://129.28.14.245:5000/banner").then((res) => {
        console.log(res);
        //this.cat=res.data.tags
        //this.tableData=res.data.banners
      });
    },
  },

  data() {
    return {
      wid:'100%',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      one: "",
      two: "",
      three: "",
      four: "",
      five:'',
      currentPage: 1,
      pagesize:2,
      newtableData: [  {
          id: 1,
          username: "王小虎",
          usercode: "hfhh",
          suomin: " 系统管理员",
          situation: "正常 ",
        },{
          id: 1,
          username: "王小龙",
          usercode: "hfhh",
          suomin: " 高新区",
          situation: "正常 ",
        }, {
          id: 1,
          username: "王小虎",
          usercode: "hfhh",
          suomin: " 系统管理员",
          situation: "正常 ",
        }]
    };
  },
};
</script>

